<template>
  <div class="">
    <div :class="isPhoneType ? 'wx_phone_form form_css' : 'form_css'">
      <div class="f_title">签约项目报名</div>
      <div class="f_form">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="110px"
          :label-position="isPhoneType ? 'top' : 'right'"
        >
          <div class="m-title">选择展区：</div>
          <div class="form_left">
            <el-form-item label="展区名称：" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择展区名称"
                :flat="true"
                :normalizer="myNormalizer"
              />
              <span :class="isPhoneType ? 'text_css text_css_18' : 'text_css'">
                说明:请选择签约项目所在地对应展区
              </span>
            </el-form-item>
          </div>

          <div class="m-title">项目信息：</div>
          <div class="form_left">
            <el-form-item label="牵头单位：" prop="headName">
              <el-input
                v-model="form.headName"
                placeholder="请输入牵头单位名称"
              />
            </el-form-item>
            <el-form-item label="项目名称：" prop="projectName">
              <el-input
                v-model="form.projectName"
                placeholder="请输入项目名称"
              />
            </el-form-item>
            <el-form-item label="项目简介：" prop="info">
              <el-input
                type="textarea"
                v-model="form.info"
                placeholder="请输入项目简介"
                :rows="4"
              />
            </el-form-item>
            <el-form-item label="总投资额：" prop="allMoney">
              <el-input-number
                v-model="form.allMoney"
                placeholder="请输入总投资额（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 30px)"
              />
              <span>元</span>
            </el-form-item>
            <el-form-item label="融资额：" prop="prepared">
              <el-input-number
                v-model="form.prepared"
                placeholder="请输入融资额（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 30px)"
              />
              <span>元</span>
            </el-form-item>
            <el-form-item label="项目年限：" prop="projectYear">
              <el-input
                v-model="form.projectYear"
                placeholder="请输入项目年限"
              />
            </el-form-item>
            <el-form-item label="合作方式：" prop="meth">
              <el-input v-model="form.meth" placeholder="请输入合作方式" />
            </el-form-item>
            <el-form-item label="资金用途：" prop="way">
              <el-input v-model="form.way" placeholder="请输入资金用途" />
            </el-form-item>
            <el-form-item label="收益预测：" prop="predict">
              <el-input-number
                v-model="form.predict"
                placeholder="请输入收益预测（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 30px)"
              />
              <span>元</span>
            </el-form-item>
          </div>

          <div class="care_css">
            <ul>
              <li>注意：</li>
              <li>
                1.本表所有填报项均为必填项（包括序号），填报内容无或无法确定的填写“无”或“待定”，不得有空项，未填写无法上传。
              </li>
              <li>2.填报信息必须真实有效，否则无法通过审核。</li>
            </ul>
          </div>

          <div class="m-title">签约信息：</div>
          <div class="form_left">
            <el-form-item label="签约甲方：" prop="sigOwner">
              <el-input
                v-model="form.sigOwner"
                placeholder="请输入签约甲方单位名称"
              />
            </el-form-item>
            <el-form-item label="签约人：" prop="sigUser">
              <el-input v-model="form.sigUser" placeholder="请输入签约人" />
            </el-form-item>
            <el-form-item label="职务：" prop="sigPost">
              <el-input v-model="form.sigPost" placeholder="请输入职务" />
            </el-form-item>
            <el-form-item label="地址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="联系方式：" prop="sigMobile">
              <el-input v-model="form.sigMobile" placeholder="请输入联系方式" />
            </el-form-item>
            <div class="w100 dashed mb20" />
            <el-form-item label="签约乙方：" prop="buyer">
              <el-input
                v-model="form.buyer"
                placeholder="请输入签约乙方单位名称"
              />
            </el-form-item>
            <el-form-item label="签约人：" prop="buyerUser">
              <el-input v-model="form.buyerUser" placeholder="请输入签约人" />
            </el-form-item>
            <el-form-item label="职务：" prop="buyerPost">
              <el-input v-model="form.buyerPost" placeholder="请输入职务" />
            </el-form-item>
            <el-form-item label="地址：" prop="buyerAddress">
              <el-input v-model="form.buyerAddress" placeholder="请输入地址" />
            </el-form-item>
            <el-form-item label="联系方式：" prop="buyerMibole">
              <el-input
                v-model="form.buyerMibole"
                placeholder="请输入联系方式"
              />
            </el-form-item>
            <el-form-item label="参展年限：" prop="joinYear">
              <el-select
                v-model="form.joinYear"
                placeholder="请选择参展年限"
                class="w100"
              >
                <el-option
                  v-for="item in dict.type.sys_exhibit_year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="签约图片：">
              <ul
                v-if="form.picList && form.picList.length != 0"
                class="more-100-list"
              >
                <li v-for="(item, index) in form.picList" :key="index">
                  <div v-if="item" class="demo-image__preview">
                    <el-image
                      :src="item"
                      :preview-src-list="[item]"
                      class="avatar"
                    />
                  </div>

                  <i
                    class="el-icon-delete remove-img"
                    @click="handleRemoveMore(index)"
                  />
                </li>
              </ul>
              <ul class="w100 fl">
                <div>
                  <uploadBig
                    :showBtn="true"
                    btnText="上传签约图片"
                    upWidth="104px"
                    upHeight="30px"
                    upLineHeight="30px"
                    :accept="uploadAccept"
                    :showFileList="false"
                    :fileSize="5"
                    @getUpload="uploadMoreImg"
                  />
                </div>
                <div class="w100 small-text">
                  提示：建议上传图片大小不超过
                  <span class="red">3MB！</span> ，宽度不超过<span class="red">
                    570px
                  </span>
                  ， 格式为
                  <span class="red">{{ uploadAccept }}</span>
                  的文件
                </div>
              </ul>
            </el-form-item>
            <el-form-item label="签约视频：">
              <div
                v-if="form.videoUrl"
                style="width: 240px; height: 140px; position: relative"
              >
                <video
                  :src="form.videoUrl"
                  controls
                  style="width: 240px; height: 140px"
                />
                <i class="el-icon-delete remove-img" @click="removeVideo" />
              </div>

              <uploadBig
                v-else
                :showBtn="true"
                btnText="上传视频"
                upWidth="50px"
                upHeight="30px"
                upLineHeight="30px"
                accept=".mp4, .mov, .flv"
                :showFileList="false"
                :fileSize="5000"
                @getUpload="uploadVideo"
              />
              <div class="w100 small-text">
                建议提示：建议上传大小不超过
                <span class="red">5G！</span>
                上传格式为
                <span class="red">.mp4,.mov,.flv </span>
                的文件
              </div>
            </el-form-item>

            <el-form-item label="">
              <el-button
                class="sub_btn"
                type="primary"
                @click="submitForm"
                :loading="btnLoading"
              >
                提 交
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addSignatory } from "@/api/project/signing";
import { deptTreeSelect } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { checkMobile } from "@/utils/index";

export default {
  name: "User",
  dicts: ["sys_exhibit_year"],
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: false,
      btnLoading: false,

      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "请选择展区名称", trigger: "blur" },
        ],
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        info: [{ required: true, message: "请输入项目简介", trigger: "blur" }],
        allMoney: [
          {
            required: true,
            message: "请输入总投资额",
            trigger: "blur",
          },
        ],
        prepared: [
          { required: true, message: "请输入融资额", trigger: "blur" },
        ],
        projectYear: [
          { required: true, message: "请输入项目年限", trigger: "blur" },
        ],
        meth: [{ required: true, message: "请输入合作方式", trigger: "blur" }],
        way: [{ required: true, message: "请输入资金用途", trigger: "blur" }],
        predict: [
          { required: true, message: "请输入收益预测", trigger: "blur" },
        ],
        sigOwner: [
          {
            required: true,
            message: "请输入签约甲方单位名称",
            trigger: "blur",
          },
        ],

        sigUser: [{ required: true, message: "请输入签约人", trigger: "blur" }],
        sigPost: [{ required: true, message: "请输入职务", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        sigMobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        buyer: [
          {
            required: true,
            message: "请输入签约乙方单位名称",
            trigger: "blur",
          },
        ],
        buyerUser: [
          { required: true, message: "请输入签约人", trigger: "blur" },
        ],
        buyerPost: [{ required: true, message: "请输入职务", trigger: "blur" }],
        buyerAddress: [
          { required: true, message: "请输入地址", trigger: "blur" },
        ],
        buyerMibole: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],

        joinYear: [
          { required: true, message: "请选择参展年限", trigger: "change" },
        ],
        headName: [
          { required: true, message: "请输入牵头单位名称", trigger: "blur" },
        ],
      },

      // 部门树选项
      deptOptions: [],
      uploadAccept: ".png, .jpg, .jpeg, .gif",
      sig: 1,
      isPhoneType: false,
    };
  },

  created() {
    this.isPhoneType = checkMobile();

    this.getDeptTree();
    this.reset();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        signatoryId: undefined,
        projectName: undefined,
        info: undefined,
        allMoney: undefined,
        prepared: undefined,
        projectYear: undefined,
        meth: undefined,
        way: undefined,
        predict: undefined,
        sigOwner: undefined,
        sigUser: undefined,
        sigPost: undefined,
        address: undefined,
        sigMobile: undefined,
        buyer: undefined,
        buyerUser: undefined,
        buyerPost: undefined,
        buyerAddress: undefined,
        buyerMibole: undefined,
        joinYear: "2025",
        picList: [],
        videoUrl: undefined,
        headName: undefined,
        deptId: undefined,
        sig: this.sig,
      };
      this.resetForm("form");
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          addSignatory(this.form)
            .then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.reset();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },

    // 图片相册上传
    uploadMoreImg(data) {
      this.form.picList.push(data);
    },

    // 移除图片相册
    handleRemoveMore(index) {
      this.form.picList.splice(index, 1);
    },

    // 上传视频
    uploadVideo(data) {
      this.form.videoUrl = data;
    },

    removeVideo() {
      this.form.videoUrl = undefined;
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: node.children != undefined,
        children: node.children,
      };
    },
  },
};
</script>

<style scoped>
.form_css {
  width: 700px;
  margin: auto;
}

.f_title {
  width: 100%;
  text-align: left;
  overflow: hidden;
  font-size: 22px;
  font-weight: bold;
  padding-bottom: 15px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;
}
.f_form {
  width: 600px;
  height: auto;
}

.m-title {
  width: 100%;
  padding-left: 30px;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form_left {
  width: 100%;
  padding-left: 80px;
}
.sub_btn {
  width: 200px;

  margin-left: 50px;
  margin-top: 30px;
}

.care_css {
  width: 100%;
  height: auto;
  padding-left: 80px;
  font-size: 14px;
  margin-bottom: 20px;
}

.care_css ul li:first-child {
  padding-left: 0;
}
.care_css ul li {
  margin-bottom: 6px;
  padding-left: 20px;
}

.text_css {
  color: red;
  font-size: 20px;
}
.text_css_18 {
  font-size: 18px;
}

/* 手机端样式 */
.wx_phone_form {
  width: 100%;
  height: auto;
}

.wx_phone_form .f_title {
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.wx_phone_form .f_form {
  width: 100%;
}

.wx_phone_form .m-title {
  padding-left: 10px;
  font-size: 17px;
}

.wx_phone_form .form_left {
  padding-left: 10px;
}

.wx_phone_form .care_css {
  padding-left: 10px;
}

.wx_phone_form ul {
  width: 100%;
}
.wx_phone_form .more-100-list li {
  width: calc(50% - 7px);
  height: 130px;
}

.wx_phone_form .more-100-list li:nth-child(2n) {
  margin-right: 0;
}

.wx_phone_form .more-100-list li .demo-image__preview {
  height: 100%;
}
</style>

<style>
.wx_phone_form .el-image__preview {
  border-radius: 4px;
}
</style>
